<template>
    <div class="container">
        <el-card class="meter-nav" v-loading="loading">
            <MeterTree :data="treeDataForChart" @select="handleMeterSelect" @refresh="getMeters"></MeterTree>
        </el-card>
        <el-card body-style="height: 90%;" class="meter-report-card">
            <template #header>
                <div class="meter-report-title">
                    {{ currentTitle }}
                </div>
                <div @click="switchComponent" class="meter-report-icon">
                    <!-- hover提示 -->
                    <el-tooltip content="切换报表类型" placement="top">
                        <i class="fa fa-exchange"></i>
                    </el-tooltip>
                </div>
            </template>
            <component :currentMeter="currentMeter" :is="currentComponent"></component>
        </el-card>
    </div>
</template>

<script setup>
import { shallowRef, ref, computed, watch } from "vue"
import MeterTree from "@/components/meter/MeterTree.vue"
import { getAsyncComponent } from "@/utils/asyncComponentLoader";
import { getMeterInfoApi } from "@/api/meter";
import { handleError } from "@/utils/handleError";
import convertToTreeData from '@/utils/convertToTreeData';
import { getMetersByLevel } from '@/utils/getMetersByLevel';
import { sortMeterList } from '@/utils/meterUtils';
import dayjs from 'dayjs';
import { useCompanyStore } from "@/stores/company";
const companyStore = useCompanyStore()
const MeterReportDaily = getAsyncComponent(() => import("./components/MeterReportDaily.vue"))
const MeterReportDailyDetail = getAsyncComponent(() => import("./components/MeterReportDailyDetail.vue"))
let WATER_TYPE = 1

// 状态管理
const loading = ref(false)
const currentComponent = shallowRef(MeterReportDailyDetail)
const treeDataForChart = ref([])
const meterList = ref([])
const meterLevels = ref([])
const currentMeter = ref(null)

// 添加日期范围
const dateRange = computed(() => {
    const today = dayjs()
    const start = today.startOf('day').valueOf()
    const end = today.endOf('day').valueOf()
    return [start, end]
})

const currentTitle = computed(() => {
    return currentComponent.value === MeterReportDailyDetail ? "按时段报表" : "按日报表"
})

const switchComponent = () => {
    if (currentComponent.value === MeterReportDaily) {
        currentComponent.value = MeterReportDailyDetail
    } else {
        currentComponent.value = MeterReportDaily
    }
}

// 获取水表
const getMeters = async () => {
    loading.value = true
    try {
        const res = await getMeterInfoApi({
            type: WATER_TYPE,
            company_id: companyStore.currentCompany.id
        })
        if (res.code !== 200) {
            throw new Error(res.message || '获取表计列表失败')
        }
        // 对列表进行排序
        meterList.value = sortMeterList(res.data)
        treeDataForChart.value = await convertToTreeData(meterList.value)
        meterLevels.value = getMetersByLevel(treeDataForChart.value)
        currentMeter.value = treeDataForChart.value[0]
    } catch (error) {
        handleError(error, '获取表计列表失败')
    } finally {
        loading.value = false
    }
}

// 添加表计选择处理函数
const handleMeterSelect = (meter) => {
    currentMeter.value = meter
}

watch(
    () => companyStore.currentCompany,
    () => {
        getMeters()
    }, {
    immediate: true
}
)
</script>

<style scoped>
.container {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.meter-nav {
    flex: 1;
    border-radius: 4px;
    margin-right: 1rem;
    overflow: auto;
    max-width: 18rem;
}

.meter-report-card {
    flex: 3;
    border-radius: 4px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.meter-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;

}
</style>
